Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
css-selector-tokenizer
Advanced tools
The css-selector-tokenizer package is a utility for parsing and tokenizing CSS selectors. It allows developers to break down complex CSS selector strings into manageable, structured tokens, facilitating easier manipulation and analysis of CSS selectors in JavaScript.
Parsing CSS selectors
This feature allows the parsing of CSS selector strings into a structured format. The code sample demonstrates how to parse a complex CSS selector involving class, id, and attribute selectors into a tokenized object.
const tokenizer = require('css-selector-tokenizer');
const parsedSelector = tokenizer.parse('.class > #id[attr=value]');
console.log(parsedSelector);
Stringifying parsed tokens
This feature converts tokenized selector objects back into string format. The code sample shows how to take a tokenized object representing a simple class selector and convert it back into a standard CSS selector string.
const tokenizer = require('css-selector-tokenizer');
const tokens = {
type: 'selectors',
nodes: [{
type: 'selector',
nodes: [{
type: 'class',
name: 'example'
}]
}]
};
const selectorString = tokenizer.stringify(tokens);
console.log(selectorString);
This package is similar to css-selector-tokenizer but is built on top of PostCSS, offering a more robust API for manipulating selectors within the PostCSS ecosystem. It provides more detailed handling of pseudo-classes and pseudo-elements compared to css-selector-tokenizer.
css-what is another CSS selector parsing library that translates selectors into an abstract syntax tree (AST). Unlike css-selector-tokenizer, css-what focuses more on the parsing aspect without providing functionalities for stringifying the parsed output.
Parses and stringifies CSS selectors.
import Tokenizer from "css-selector-tokenizer";
let input = "a#content.active > div::first-line [data-content], a:not(:visited)";
Tokenizer.parse(input); // === expected
let expected = {
type: "selectors",
nodes: [
{
type: "selector",
nodes: [
{ type: "element", name: "a" },
{ type: "id", name: "content" },
{ type: "class", name: "active" },
{ type: "operator", operator: ">", before: " ", after: " " },
{ type: "element", name: "div" },
{ type: "pseudo-element", name: "first-line" },
{ type: "spacing", value: " " },
{ type: "attribute", content: "data-content" },
]
},
{
type: "selector",
nodes: [
{ type: "element", name: "a" },
{ type: "nested-pseudo-class", name: "not", nodes: [
{
type: "selector",
nodes: [
{ type: "pseudo-class", name: "visited" }
]
}
] }
],
before: " "
}
]
}
Tokenizer.stringify(expected) // === input
// * => { type: "universal" }
// foo|element = { type: "element", name: "element", namespace: "foo" }
// *|* = { type: "universal", namespace: "*" }
// :has(h1, h2) => { type: "nested-pseudo-class", name: "has", nodes: [
// {
// type: "selector",
// nodes: [
// { type: "element", name: "h1" }
// ]
// },
// {
// type: "selector",
// nodes: [
// { type: "element", name: "h2" }
// ],
// before: " "
// }
// ] }
npm install
npm test
npm autotest
will watch lib
and test
for changes and retestMIT
Tobias Koppers, 2015.
FAQs
Parses and stringifies CSS selectors
We found that css-selector-tokenizer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.